<template>
  <div>
    <swiper v-if="images.length>1" class="swiper" :indicator-dots="images.length>1?true:false" autoplay="true" interval="5000" duration="1000">
      <swiper-item v-for="(item, index) in images" :key="index">
          <a v-if="item.jump_url != null && item.jump_url != ''" class="slide-image" :href="item.jump_url" :style="'background-image:url('+item.litpic+')'"></a>
          <div v-else class="slide-image" :style="'background-image:url('+item.litpic+')'"></div>
      </swiper-item>
    </swiper>
    <swiper v-if="images.length==1" class="swiper" indicator-dots="false" autoplay="true" interval="5000" duration="1000">
      <swiper-item v-for="(item, index) in images" :key="index">
          <a v-if="item.jump_url != null && item.jump_url != ''" class="slide-image" :href="item.jump_url" :style="'background-image:url('+item.litpic+')'"></a>
          <div v-else class="slide-image" :style="'background-image:url('+item.litpic+')'"></div>
      </swiper-item>
    </swiper>
    <van-row>
      <van-col span="5">
        <div class="city">
          <a href="/pages/citySelect/main">
            <div class="city-box"> <span class="nowrap city-text">{{city}}</span> <span class="triangle_border_down"></span></div>
          </a>
        </div>
      </van-col>
      <van-col span="19">
        <van-search
          class="searchItem"
          :value="searchValue"
          placeholder="请输入关键词…"
          background="#fff"
          use-action-slot
          @search="onSearch"
          @change="onchange"
        >
        </van-search>
      </van-col>
    </van-row>
    <div class="title clearfix">
      <span class="fl">本真人物</span>
      <navigator class="fr" url="/pages/character_list/main" open-type="switchTab">查看更多</navigator>
    </div>
    <div class="new_list" v-if="jurenwu.length > 0">
      <a class="li" v-for="(item,index) in jurenwu" :key="index" :href="'/pages/character_details/main?id='+item.id+''">
        <!-- list_1 -->
        <div v-if="item.list_style=='list_1'">
          <div class="tit_box">
            <span class="tit">{{item.title}}</span>
            <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
          </div>
          <div class="img_box lg mt-1" :style="{backgroundImage:'url(' + item.image[0] + ')'}" v-if="item.image.length>0"></div>
        </div>
        <!-- list_3 -->
        <div v-if="item.list_style=='list_3'">
          <div class="tit_box">
            <span class="tit">{{item.title}}</span>
            <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
          </div>
          <van-row class="mt-1" gutter="4">
            <van-col span="8" v-for="(img,i) in item.image" :key="i">
              <div class="img_box" :style="{backgroundImage:'url(' + img + ')'}"></div>
            </van-col>
          </van-row>
        </div>
        <!-- list_4 -->
        <div v-if="item.list_style=='list_4'">
          <div class="tit_box">
            <span class="tit">{{item.title}}</span>
            <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
          </div>
        </div>
        <!-- list_2 -->
        <van-row gutter="8" v-if="item.list_style=='list_2'">
          <van-col span="16">
            <div class="tit_box">
              <span class="tit">{{item.title}}</span>
              <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
            </div>
          </van-col>
          <van-col span="8">
            <div class="img_box" :style="{backgroundImage:'url(' + item.image[0] + ')'}"></div>
          </van-col>
        </van-row>
      </a>
    </div>
    <div class="nodata" v-else>
      <van-row>
        <van-col span="24">
          <van-icon custom-class="notIOCN" class="notIOCNWarp" name="notes-o" />
          <div class="notTXT">暂无数据</div>
        </van-col>
      </van-row>
    </div>
    <div class="title clearfix mt-1">
      <span class="fl">聚活动</span>
      <a class="fr" href="/pages/activity_list/main" hover-class="a-hover">查看更多</a>
    </div>
    <div class="new_list" v-if="juhuodong.length>0">
      <a class="li" v-for="(item,index) in juhuodong" :key="index" :href="'/pages/activity_details/main?id='+item.id+''">
        <!-- 第一篇 -->
        <div v-if="index==0">
          <div class="tit_box">
            <span class="tit">{{item.title}}</span>
            <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
          </div>
          <div class="img_box lg mt-1" :style="{backgroundImage:'url(' + item.image[0] + ')'}" v-if="item.image.length>0"></div>
        </div>
        <!-- 不是第一篇 -->
        <div v-if="index!=0">
          <!-- 多图 -->
          <div v-if="item.image.length>1">
            <div class="tit_box">
              <span class="tit">{{item.title}}</span>
              <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
            </div>
            <van-row class="mt-1" gutter="4">
              <van-col span="8" v-for="(img,i) in item.image" :key="i">
                <div class="img_box" :style="{backgroundImage:'url(' + img + ')'}"></div>
              </van-col>
            </van-row>
          </div>
          <!-- 无图 -->
          <div v-if="item.image.length<1">
            <div class="tit_box">
              <span class="tit">{{item.title}}</span>
              <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
            </div>
          </div>
          <!--  单图 -->
          <van-row gutter="8" v-if="item.image.length==1">
            <van-col span="16">
              <div class="tit_box">
                <span class="tit">{{item.title}}</span>
                <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
              </div>
            </van-col>
            <van-col span="8">
              <div class="img_box" :style="{backgroundImage:'url(' + item.image[0] + ')'}"></div>
            </van-col>
          </van-row>
        </div>
      </a>
    </div>
    <div class="nodata" v-else>
      <van-row>
        <van-col span="24">
          <van-icon custom-class="notIOCN" class="notIOCNWarp" name="notes-o" />
          <div class="notTXT">暂无数据</div>
        </van-col>
      </van-row>
    </div>
    <div class="title clearfix mt-1">
      <span class="fl">聚公告</span>
      <a class="fr" href="/pages/notice_list/main">查看更多</a>
    </div>
    <div class="new_list" v-if="jutonggao.length > 0">
      <a class="li" v-for="(item,index) in jutonggao" :key="index" :href="'/pages/notice_details/main?id='+item.id+''">
        <!-- 是第一张的 单图 -->
        <div v-if="index==0">
          <div class="tit_box">
            <span class="tit">{{item.title}}</span>
            <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
          </div>
          <div class="img_box lg mt-1" :style="{backgroundImage:'url(' + item.image[0] + ')'}" v-if="item.image.length>0"></div>
        </div>
        <div v-if="index!=0">
          <!-- 不是第一张的 多图 -->
          <div v-if="item.image.length>1">
            <div class="tit_box">
              <span class="tit">{{item.title}}</span>
              <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
            </div>
            <van-row class="mt-1" gutter="4">
              <van-col span="8" v-for="(img,i) in item.image" :key="i">
                <div class="img_box" :style="{backgroundImage:'url(' + img + ')'}"></div>
              </van-col>
            </van-row>
          </div>
          <!-- 不是第一张的 无图 -->
          <div v-if="item.image.length<1">
            <div class="tit_box">
              <span class="tit">{{item.title}}</span>
              <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
            </div>
          </div>
          <!-- 不是第一张的  单图 -->
          <van-row gutter="8" v-if="item.image.length==1">
            <van-col span="16">
              <div class="tit_box">
                <span class="tit">{{item.title}}</span>
                <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
              </div>
            </van-col>
            <van-col span="8">
              <div class="img_box" :style="{backgroundImage:'url(' + item.image[0] + ')'}"></div>
            </van-col>
          </van-row>
        </div>
      </a>
    </div>
    <div class="nodata" v-else>
      <van-row>
        <van-col span="24">
          <van-icon custom-class="notIOCN" class="notIOCNWarp" name="notes-o" />
          <div class="notTXT">暂无数据</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import QQMapWX from '../../../static/map/qqmap-wx-jssdk'
import {integral, views} from '../../utils/utils.js'
// import {integral, views} from '../../utils/utils.js'
export default {
  onShow: function () {
    if (this.Global.userSite !== '') {
      this.city = this.Global.userSite
    }
  },
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '首页',
      imageUrl: '/images/a.png',
      path: '/pages/home/main',
      withShareTicket: true
    }
  },
  data () {
    return {
      images: [], // 轮播图
      jurenwu: [], // 本真人物文章
      juhuodong: [], // 聚活动文章
      jutonggao: [], // 聚动态文章
      searchValue: '',
      mapKey: 'E2XBZ-MIP3D-IGA43-PEXQN-KTCO6-UKB27',
      city: '定位中'
    }
  },
  components: {
  },
  methods: {
    onSearch () {
      wx.navigateTo({
        url: '/pages/search_list/main?q=' + this.searchValue
      })
    },
    onchange (val) {
      this.searchValue = val.mp.detail
    },
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    }
  },
  created () {
    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
      key: this.mapKey
    })
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        let _this = this
        let latitude = res.latitude
        let longitude = res.longitude
        qqmapsdk.reverseGeocoder({
          location: `${latitude},${longitude}` || '',
          success: function (res) {
            _this.city = res.result.ad_info.city
            _this.code = res.result.ad_info.city_code
          },
          fail: function (error) {
            console.error(error)
          },
          complete: function (res) {}
        })
      }
    })
  },
  mounted () {
    let _this = this
    // 首页
    wx.request({
      url: this.apiUrl + 'api/getbanner?type=index',
      success (res) {
        let data = res.data
        if (data.code === 200) {
          _this.images = Object.assign([], data.data)
        }
      }
    })
    // 本真人物
    wx.request({
      url: this.apiUrl + 'api/article?type=jurenwu&page=1&pagesize=5',
      success (res) {
        let data = res.data
        if (data.code === 200) {
          _this.jurenwu = data.data
        }
      }
    })
    // 聚活动
    wx.request({
      url: this.apiUrl + 'api/article?type=juhuodong&page=1&pagesize=3',
      success (res) {
        let data = res.data
        if (data.code === 200) {
          _this.juhuodong = data.data
        }
      }
    })
    // 聚公告
    wx.request({
      url: this.apiUrl + 'api/article?type=jutonggao&page=1&pagesize=3',
      success (res) {
        let data = res.data
        if (data.code === 200) {
          _this.jutonggao = data.data
        }
      }
    })
  }
}
</script>
<style>
van-row{ display:block;}
/**/
.swiper{height:160px}
.slide-image{
  height: 160px;
  display:block;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
/*城市定位*/
.city {
  background-color: #fff!important;
  padding: 19px 0 20px 10px!important;
  text-align: center;
  position: relative;
}
.city-box{
  position: relative;
}
.city-box .city-text{
  min-height: 24px;
  display:block;
  font-size: 16px;
  padding-right: 8px;
  font-weight: 500;
}
.city-box .triangle_border_down{
    width:0;
    height:0;
    position: absolute;
    top: 8px;
    right: 0;
    border-width:6px 5px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
}
/*搜索*/
.searchItem {
  width: 100%;
}
.van-search{
  background-color: #fff!important;
  padding: 14px 0 14px 10px!important;
}

.van-search__field{
  padding: 0 0; 
  background-color: #f1f1f1!important;
}
.van-search__field .van-cell{
  background-color: #f1f1f1!important;
  
}
.van-search__field .van-cell .van-icon{
  top: 1px;
  margin-right: 2px;
}
</style>
